<template>
  <el-col :span="24">
    <el-button @click="addp" type="primary" icon="plus" size="mini"></el-button>
    <el-row v-if="ptype=='1'" v-for="(item,index) in form.lists" class="clearfix valueRow">
      <el-col class="inp_item" :span="11">
        <el-input v-model="item.key" :placeholder="placeholder.key" @change="cginp"></el-input>
      </el-col>
      <el-col class="inp_item" :span="11">
        <el-input v-model="item.val" :placeholder="placeholder.val" @change="cginp"></el-input>
      </el-col>
      <el-col class="inp_item" :span="2">
        <el-button @click="delp(index)" type="primary" icon="minus" size="mini"></el-button>
      </el-col>
    </el-row>

    <el-row v-if="ptype=='2'" v-for="(item,index) in form.lists" class="clearfix valueRow">
      <el-col class="inp_item" :span="22">
        <el-input v-model="item.val" placeholder="Value" @change="cginp"></el-input>
      </el-col>

      <el-col class="inp_item" :span="2">
        <el-button @click="delp(index)" type="primary" icon="minus" size="mini"></el-button>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
  //	import util from '../../common/util'

  export default {
    props: {
      type: [String, Number],
      placeholder: {
        type: Object,
        default: function () {
          return {key: 'key', val: 'value'}
        }
      },
      value: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    components: {},
    data() {
      return {
        ptype: this.type,
        form: {
          lists: this.value
        },
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        this.form.lists = this.value;
      },
    },
    methods: {
      addp: function () {
        this.form.lists.push({
          key: "",
          val: ""
        })
      },
      delp: function (i) {
        this.form.lists.splice(i, 1);
      },
      cginp(){
        this.setCurrentValue(this.form.lists)
      },
      setCurrentValue: function (value) {
        this.$emit('input', value);
        this.$emit('change', value);
      },
    },
    mounted: function () {

    }
  }
</script>

<style scoped>
  .inp_item {
    padding-right: 10px;
  }

  .inp_item:last-child {
    padding-right: 0;
  }

  .valueRow {
    margin-bottom: 5px;
  }
</style>